<template>
<div class="pd10">
<div>123木头人{{this.$store.state.a.ma}}</div>
<div>456木头人{{this.$store.getters.maGet}}</div>
<div>呵呵{{this.$store.state.haha}}</div>
    <div class="yt yt-pj" style="margin-bottom:10px;">
        <div class="yt">
            <el-input @keyup.native.enter="sshow($event)" v-model="iptsearch" placeholder="请输入内容"></el-input>
            <el-button @click="sshow" type="primary" icon="el-icon-search" style="margin-left:10px;"></el-button>
        </div>
        <div>
            <el-button size="medium" type="success" icon=" el-icon-plus"><span class="">添加影片</span></el-button>
        </div>
    </div>

    <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">

        <el-table-column type="expand" width="50">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>

        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column property="date" label="日期" width="120">
        </el-table-column>
        <el-table-column property="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column property="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" width="340">
            <template slot-scope="scope">
                <el-button size="" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="" type="danger" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改用户属性" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox  v-model="form.forbidLogin">禁止登录</el-checkbox>
                <el-checkbox v-model="form.forbidMsg">禁止留言</el-checkbox>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogBtnOk">确 定</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>
export default {
    data() {
        return {
            iptsearch: '',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentRow: null,

            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                forbidLogin: true,
                forbidMsg: false
            },
            formLabelWidth: '100px'
        }
    },

    methods: {
        sshow(e) {
            console.log(e)
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        dialogBtnOk(){
            console.log(this.form)
        },
        handleCurrentChange(val) {
            console.log(val)
            this.currentRow = val;
        },
        handleEdit(index, row) {
            console.log('栀子花', index, row);
            this.dialogFormVisible = true
        },
        handleDelete(index, row) {
            console.log('金克拉', index, row);
            this.tableData.splice(index, 1)
        }
    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
